<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="1000px">
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="提现单号" align="center" prop="withdrawal_no" />
			<el-table-column label="提现单类型" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="结算订单数" align="center" prop="finish_order_num">
				<template #default="{ row }">
					<el-link type="primary" @click="onViewPurchaseOrder(row)">{{ row.finish_order_num }}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="提现货款总额" align="center" prop="money" />
			<el-table-column label="交易手续费" align="center" prop="procedure_money" />
			<el-table-column label="货款应收金额" align="center" prop="money_deserved" />
			<el-table-column label="货款实收金额" align="center" prop="money_reality" />
			<el-table-column label="申请时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
			<el-table-column label="审核时间" align="center" prop="examine_time" :formatter="formatterExamineTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<viewPurchaseOrderDialog ref="viewPurchaseOrderDialogRef" />
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { supplier1Api } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

import viewPurchaseOrderDialog from './viewPurchaseOrderDialog.vue'

const Supplier1Api = supplier1Api();
export default {
	components: { viewPurchaseOrderDialog },
	setup() {
		const state = reactive({
			dialog: {
				isShowDialog: false,
				type: '',
				title: '已审核提现货款明细',
				submitLoading: false,
			},
			queryParams: {
				type: 4,
				status: 2,
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
		});
		const viewPurchaseOrderDialogRef = ref();

		/********** 触发事件 **********/
		// 货款订单
		const onViewPurchaseOrder = (row: Object) => {
			viewPurchaseOrderDialogRef.value.openDialog(row);
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = () => {
			state.dialog.isShowDialog = true;
			state.queryParams = {
				type: 4,
				status: 2,
				pageNum: 1,
				pageSize: 10,
			};
			getList();
		};
		// 刷新列表
		const getList = () => {
			state.loading = true;
			_supplierWithdrawalList(state.queryParams);
		};
		// 提现单类型字典
		const formatterType = (row: any) => {
			switch (row.type) {
				case 1:
					return '微信提现单';
				case 2:
					return '余额提现单';
				case 3:
					return '积分提现单';
				case 4:
					return '分账提现单';
				default:
					return '未知错误';
			}
		};
		// 申请时间字典
		const formatterCreateTime = (row: any) => {
			return timeDictionary(row.create_time);
		};
		// 审核时间字典
		const formatterExamineTime = (row: any) => {
			return timeDictionary(row.examine_time);
		};

		/********** 网络请求 **********/
		// 供应商提现记录
		const _supplierWithdrawalList = (params: Object) => {
			Supplier1Api.supplierWithdrawalList(params)
				.then((res) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};

		return {
			viewPurchaseOrderDialogRef,
			onViewPurchaseOrder,
			openDialog,
			getList,
			formatterType,
			formatterCreateTime,
			formatterExamineTime,
			...toRefs(state),
		};
	},
};
</script>
